<script lang="jsx" setup>
import dayjs from 'dayjs';
import { computed, nextTick, ref } from 'vue';

const commonSearchRef = ref(null);
const tableRef = ref(null);
const searchParams = ref({
  // moduleNo: null,
  // lotId: null,
  // pnlId: null,
  time: null
});

const searchFormList = [
  // {
  //   type: 'input',
  //   key: 'pnlId',
  //   label: ' PNL码',
  //   span: 24,
  //   md: 12,
  //   lg: 10,
  //   xl: 8,
  //   xxl: 6,
  //   placeholder: '请输入PNL码',
  //   showTime: true
  // },
  // {
  //   type: 'input',
  //   key: 'lotId',
  //   label: 'LOT号',
  //   span: 24,
  //   md: 12,
  //   lg: 10,
  //   xl: 8,
  //   xxl: 6,
  //   placeholder: '请输入LOT号',
  //   showTime: true
  // },
  // {
  //   type: 'input',
  //   key: 'moduleNo',
  //   label: '料号',
  //   span: 24,
  //   md: 12,
  //   lg: 10,
  //   xl: 8,
  //   xxl: 6,
  //   placeholder: '请输入料号',
  //   showTime: true
  // },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true // 显示时分秒选择
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

// 表格数据
const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    fixed: 'left',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  // {
  //   key: 'pnlId',
  //   dataIndex: 'pnlId',
  //   title: ' PNL码',
  //   width: 150,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   fixed: 'left'
  // },
  // {
  //   key: 'lotId',
  //   dataIndex: 'lotId',
  //   title: ' LOT号',
  //   width: 140,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   fixed: 'left'
  // },
  // {
  //   key: 'moduleNo',
  //   dataIndex: 'moduleNo',
  //   title: ' 料号',
  //   width: 160,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   fixed: 'left'
  // },
  // {
  //   key: 'readCodeTime',
  //   dataIndex: 'readCodeTime',
  //   title: ' 读码时间',
  //   width: 150,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   fixed: 'left'
  // },

  {
    key: 'mainEqpId',
    dataIndex: 'mainEqpId',
    title: '设备编号',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true,
    fixed: 'left'
  },
  {
    key: 'itemName1',
    dataIndex: 'itemName1',
    title: '输送速度-设置值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName2',
    dataIndex: 'itemName2',
    title: '输送速度-实时值',
    align: 'center',
    width: 150,
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName3',
    dataIndex: 'itemName3',
    title: '干板段输送',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName4',
    dataIndex: 'itemName4',
    title: '微蚀1温度-设置值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName5',
    dataIndex: 'itemName5',
    title: '微蚀1温度-实时值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName6',
    dataIndex: 'itemName6',
    title: '微蚀2温度-设置值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName7',
    dataIndex: 'itemName7',
    title: '微蚀2温度-实时值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName8',
    dataIndex: 'itemName8',
    title: '热风吹干温度-设置值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName9',
    dataIndex: 'itemName9',
    title: '热风吹干温度-实时值',
    align: 'center',
    checked: true,
    width: 150,
    ellipsis: true
  },
  {
    key: 'itemName10',
    dataIndex: 'itemName10',
    title: '微蚀1A频率-厚板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName11',
    dataIndex: 'itemName11',
    title: '微蚀1A频率-薄板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName12',
    dataIndex: 'itemName12',
    title: '微蚀1A频率-实时值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName13',
    dataIndex: 'itemName13',
    title: '微蚀1B频率-厚板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName14',
    dataIndex: 'itemName14',
    title: '微蚀1B频率-薄板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName15',
    dataIndex: 'itemName15',
    title: '微蚀1B频率-实时值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName16',
    dataIndex: 'itemName16',
    title: '微蚀2A频率-厚板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName17',
    dataIndex: 'itemName17',
    title: '微蚀2A频率-薄板设置值',
    align: 'center',
    width: 170,
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName18',
    dataIndex: 'itemName18',
    title: '微蚀2A频率-实时值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName19',
    dataIndex: 'itemName19',
    title: '微蚀2B频率-厚板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName20',
    dataIndex: 'itemName20',
    title: '微蚀2B频率-薄板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName21',
    dataIndex: 'itemName21',
    title: '微蚀2B频率-实时值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName22',
    dataIndex: 'itemName22',
    title: '微蚀2循环泵频率-厚板设置值',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName23',
    dataIndex: 'itemName23',
    title: '微蚀2循环泵频率-薄板设置值',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName24',
    dataIndex: 'itemName24',
    title: '微蚀2循环泵频率-实时值',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName25',
    dataIndex: 'itemName25',
    title: '酸洗A频率-厚板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName26',
    dataIndex: 'itemName26',
    width: 170,
    title: '酸洗A频率-薄板设置值',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName27',
    dataIndex: 'itemName27',
    width: 150,
    title: '酸洗A频率-实时值',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName28',
    dataIndex: 'itemName28',
    title: '酸洗B频率-厚板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName29',
    dataIndex: 'itemName29',
    title: '酸洗B频率-薄板设置值',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName30',
    dataIndex: 'itemName30',
    title: '酸洗B频率-实时值',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName31',
    dataIndex: 'itemName31',
    title: '强风吹干频率-厚板设置值',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName32',
    dataIndex: 'itemName32',
    title: '强风吹干频率-薄板设置值',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName33',
    dataIndex: 'itemName33',
    width: 150,
    title: '强风吹干频率-实时值',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName34',
    dataIndex: 'itemName34',
    title: '微蚀1A上喷压力',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName35',
    dataIndex: 'itemName35',
    title: '微蚀1A下喷压力',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName36',
    dataIndex: 'itemName36',
    width: 120,
    title: '微蚀1B上喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName37',
    dataIndex: 'itemName37',
    width: 120,
    title: '微蚀1B下喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName38',
    dataIndex: 'itemName38',
    width: 120,
    title: '微蚀2A上喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName39',
    dataIndex: 'itemName39',
    width: 120,
    title: '微蚀2A下喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName40',
    dataIndex: 'itemName40',
    width: 120,
    title: '微蚀2B上喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName41',
    dataIndex: 'itemName41',
    width: 120,
    title: '微蚀2B下喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName42',
    dataIndex: 'itemName42',
    width: 120,
    title: '酸洗A上喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName43',
    dataIndex: 'itemName43',
    width: 120,
    title: '酸洗2A下喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName44',
    dataIndex: 'itemName44',
    width: 120,
    title: '酸洗2B上喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName45',
    dataIndex: 'itemName45',
    width: 120,
    title: '酸洗2B下喷压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName46',
    dataIndex: 'itemName46',
    width: 170,
    title: '强风吹干（表1）压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName47',
    dataIndex: 'itemName47',
    width: 170,
    title: '强风吹干（表2）压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName48',
    dataIndex: 'itemName48',
    width: 170,
    title: '强风吹干（表3）压力',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName49',
    dataIndex: 'itemName49',
    width: 150,
    title: '机组开机时间累积',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName50',
    dataIndex: 'itemName50',
    width: 150,
    title: '机组运行时间累积',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName51',
    dataIndex: 'itemName51',
    width: 120,
    title: '批次产量累积',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName52',
    dataIndex: 'itemName52',
    width: 120,
    title: '总产量累积',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName53',
    dataIndex: 'itemName53',
    width: 120,
    title: '用电量累积',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName54',
    dataIndex: 'itemName54',
    width: 120,
    title: '自来水用量累积',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'itemName55',
    dataIndex: 'itemName55',
    width: 120,
    title: 'DI水用量累积',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'dateTime',
    dataIndex: 'dateTime',
    title: '创建时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      // moduleNo: null,
      // lotId: null,
      // pnlId: null,
      time: null
    };
    search();
  });
}
</script>

<template>
  <div
    class="code-whitelist-page jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      :show-row-selection="false"
      :auto-generate-uuid="true"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="eap/EapEqpTrace2/selectYuZhouQcl"
    ></Table>
  </div>
</template>

<style lang="scss" scoped></style>
